<?php
	$title_meta = '作品 | ';
	include ("header.php");
?>

<div class="works index">
	<ul>
		<!--<li class="hover" style="background: url(images/index_img1.jpg)  no-repeat;background-size: 100% 100%;">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				<h1>慕斯</h1>
				<h2>趣做梦创非凡</h2>
				<p></p>
			</a>
		</li>
		<li class="hover" style="background: url(images/client_img1.jpg)  no-repeat;background-size: 100% 100%">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				
				<h1>酷晨电饭煲品牌年度推广</h1>
				<h2>暨社会化营销</h2>
				<p></p>
			</a>
		</li>
		<li class="hover" style="background: url(images/index_img2.jpg)  no-repeat;background-size: 100% 100%">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				<h1>美的智能冰箱</h1>
				<h2>“好食机”秋季推广</h2>
				<p></p>
			</a>
		</li>
		<li class="hover" style="background: url(images/index_img3.jpg)  no-repeat;background-size: 100% 100%">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text client_a">
				<h1></h1>
				<h2 class="">寻找水密码启航仪式</h2>
				<p></p>
			</a>
		</li>
		
		<li class="hover" style="background: url(images/index_img4.jpg)  no-repeat;background-size: 100% 100%">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				<h1>美的冰箱</h1>
				<h2>小黄人社会化传播</h2>
				<p></p>
			</a>
		</li>
		<li class="hover" style="background: url(images/index_img5.jpg) no-repeat;background-size: 100% 100%">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				<h1>日立电梯（中国）</h1>
				<h2>20周年庆系列活动</h2>
				<p></p>
			</a>
		</li>-->
		<div class="clear"></div>
	</ul>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        mainliWidth();
        $(window).resize(function(){
          mainliWidth();
        });
      
         function mainliWidth(){
        	var liw = $(".index .hover").width();
        	var lih = liw * 0.75;
        	$(".index>ul>li").height(lih);
	        $(".index .mask").height(lih);
	        $(".index .mask_text").height(lih);
	        $(".index .hover>a").width(liw-5);
	        $(".index .hover>a").height(lih);
        }
    });
	$(document).ready(function(){
		$.ajax({
			type:"post",
			url:"./app/index.php?m=index&a=getList",
			success:function(ret){
				var html = "";
				var i=0;
				for(var i in ret){
					html+="<li class='hover' style='background: url(./app/data/upload/"+ret[i].cover+") 0% 0% / 100% 100% no-repeat;'><a href='case.php?id="+ret[i].id+"'></a><div class='mask'></div><a href='case.php?id="+ret[i].id+"' class='mask_text'><h1> "+ret[i].post_brand+" </h1><h2>"+ret[i].post_title+"</h2><p></p></a></li>";
				}
				$(".index>ul").prepend(html);
				var liw = $(".index .hover").width();
	        	var lih = liw * 0.75;
	        	$(".index>ul>li").height(lih);
		        $(".index .mask").height(lih);
		        $(".index .mask_text").height(lih);
		        $(".index .hover>a").width(liw-3);
		        $(".index .hover>a").height(lih);
			}
		});
	});
	$(".index ul").on("mouseenter",".hover", function() {
		$(this).find(".mask").fadeOut(300);
		$(this).find(".mask_text").fadeOut(300);
 	});
     $(".index ul").on("mouseleave",".hover", function() {
		$(this).find(".mask").fadeIn(300);
		$(this).find(".mask_text").fadeIn(300);
 	});
</script>

<?php
	include ("footer.php");
?>